/**
 * 创建于：2016-5-11
 * 创建人：杨骐彰
 * 说明： 主页面侧边菜单栏
 */
import React from 'react'
import {Link} from 'react-router'
import './sidebar.scss'
import FaceIcon from './default_face.png'
import classNames from 'classnames'
import {RoleEnum} from 'utils/staticType'


const SideBar = (props) => {
  let {blocks,handleShow,height,userInfo} = props;
  return (
    <div className="sem-sidebar" style={{height:height}}>
      <div className="sem-menu-blocks">

        <div className="sem-blocks-wrapper">
          <div className="sem-title-block">
            <img className="title-img" src={FaceIcon}/>
            <div className="title-text-container">
              <div className="name">{userInfo.NickName ? userInfo.NickName:'unknow'}</div>
              <div className="name-info">{RoleEnum[userInfo.Type]? RoleEnum[userInfo.Type].name:'unknow'}</div>
            </div>
          </div>
        </div>
        <div className="sem-blocks-wrapper">
          <div className={classNames('sem-menu-block','nav')}>
            功能导航
          </div>
        </div>
        {
          blocks.map((block, i) => {
            return (
              <div className="sem-blocks-wrapper" key={i}>
                 <div className={block.isLink ? (block.isMenu ? "sem-menu-block isMenu" : "sem-menu-block clicked") : "sem-menu-block"}>
                  <Link to={block.list[0].href} activeClassName="active"
                        className={block.isLink ? "menu-title active" : "menu-title"}>
                    <div className="menu-word">
                      {block.title}
                    </div>
                  </Link>
                  {
                    block.isMenu && <div className="menu-arrow" onClick={(e) => {
                      e.stopPropagation();
                      handleShow(block.id)
                    }}>
                      <div className={(block.isShowSecondaryMenu ? true : block.isLink) ? "down" : "right"}/>

                    </div>
                  }
                 </div>
                {
                  (block.isMenu && (block.isShowSecondaryMenu ? true : block.isLink)) ?
                    <div className="menu-block" >
                      <ul className="menu-list">
                        {
                          block.list.map((item, i) => {
                            if (item.title) {
                              return (
                                <li key={i}>
                                  <Link to={item.href} activeClassName="active">
                                    {item.title}
                                  </Link>
                                </li>
                              )
                            }
                          })
                        }
                      </ul>
                    </div>
                    :
                    <div className="menu-block hide">
                      <ul className="menu-list">
                        {
                          block.list.map((item, i) => {
                            if (item.title) {
                              return (
                                <li key={i}>
                                  <Link to={item.href} activeClassName="active">
                                    {item.title}
                                  </Link>
                                </li>
                              )
                            }
                          })
                        }
                      </ul>
                    </div>
                }
              </div>)
          })
        }
      </div>
    </div>
  )
}

export default SideBar;
